<!-- 用户统计 -->
<template>
  <!-- 商户旗下玩家总数量 -->
  <div class="padding20 marginB10">
    <div class="border-line">
      <Charts v-loading="indexStore.moduleLoading" chartTitle="商户旗下玩家总数量" :xAxisData="data.userXAxis" :seriesData="data.userSeries" />
    </div>
  </div>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showPanel="true" @changeSize="changeSize"
    @changePage="changePage" @search="getAgentUsersList" @reset="onHideDetails(true)"
    @changeTh="data.dialogVisible = true">
    <template #form>
      <Operator ref="OperatorRef" @query="queryItem" />
    </template>
    <template #button>
      <div class="statistic flexBetween">
        <div class="flex">
          <p>商户数量：<span>{{ data.totalForm.count_agent }}</span></p>
          <p>地区数量：<span>{{ data.totalForm.count_area }}</span></p>
          <p>本周新增：<span>{{ data.totalForm.count_current_week }}</span></p>
          <p>上周新增：<span>{{ data.totalForm.count_before_week }}</span></p>
          <p>本月新增：<span>{{ data.totalForm.count_current_month }}</span></p>
          <p>上月新增：<span>{{ data.totalForm.count_before_month }}</span></p>
          <p>总人数：<span>{{ data.totalForm.count_user }}</span></p>
          <p>7日留存数：<span>{{ data.totalForm.count_active_seven }}</span></p>
          <p>15日留存数：<span>{{ data.totalForm.count_active_fifteen }}</span></p>
        </div>
      </div>
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width">
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                {{ item.tips }}
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'agent_id'" #default="scope">
            {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
          </template>
          <template v-if="item.prop == 'area'" #default="scope">
            {{ selectToLabel(COUNTRY, selectToLabel(indexStore.agentArray, scope.row.agent_id,'area','value')) }}
          </template>
        </el-table-column>
      </template>
    </template>
  </SearchTable>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { getAgentUsers, getTmerchantPlayers } from '@/api/player'
import Charts from '@/components/Echarts/columnarChart.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import { selectToLabel, throttle } from '@/utils/index'
import { COUNTRY } from '@/config/country'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    agent_id: -1,
    operated_id: -1
  },
  list: [],
  total: 0,
  fields: [
    { label: '商户', prop: 'agent_id', width: '240', visible: true, tips: '商户的名称' },
    { label: '地区', prop: 'area', width: '150', visible: true, tips: '商户的经营区域，可更改，创建商户时的信息设定' },
    { label: '本周新增', prop: 'count_current_week', width: '', visible: true, tips: '商户本周新增注册的玩家数量' },
    { label: '上周新增', prop: 'count_before_week', width: '', visible: true, tips: '商户上周新增注册的玩家数量' },
    { label: '本月新增', prop: 'count_current_month', width: '', visible: true, tips: '商户本月新增注册的玩家数量' },
    { label: '上月新增', prop: 'count_before_month', width: '', visible: true, tips: '商户上月新增注册的玩家数量' },
    { label: '总人数', prop: 'count_user', width: '', visible: true, tips: '商户旗下的玩家总数量' },
    { label: '7日留存数', prop: 'count_active_seven', width: '', visible: true, tips: '商户的7日留存玩家数量' },
    { label: '15日留存数', prop: 'count_active_fifteen', width: '', visible: true, tips: '商户的15日留存玩家数量' }
  ],
  dialogVisible: false,
  userXAxis: [] as string[],
  userSeries: [] as number[],
  totalForm: {} as any,
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}

onMounted(async () => {
  getTmerchantPlayersList()
  getAgentUsersList()
})

const getAgentUsersList = async () => {
  indexStore.setPageLoading(true)
  let res = await getAgentUsers(data.query)
  data.list = res.data.result.list
  data.total = res.data.result.total
  data.totalForm = res.data.countMap
}

const getTmerchantPlayersList = throttle(async () => {
  indexStore.setModuleLoading(true)
  data.userXAxis = []
  data.userSeries = []
  let res = await getTmerchantPlayers(data.query)
  // 商户旗下玩家总数量
  res.data?.forEach((item: { agent_id: number; person: number }) => {
    data.userXAxis.push(selectToLabel(indexStore.agentArray, item.agent_id))
    data.userSeries.push(item.person)
  })
}, 2000)

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}
const changePage = (val: number) => {
  data.query.page = val
  getAgentUsersList()
}

// 重置
const OperatorRef = ref<any>()
const onHideDetails = (show: boolean) => {
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      agent_id: -1,
      operated_id: -1
    }
    OperatorRef.value.onHideDetails()
    getAgentUsersList()
  }
}
</script>

<style scoped lang="scss">
.padding20 {
  padding: 10px 20px;
  background-color: var(--background);
}
</style>
